<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* a {
        width: 200px;
        height: 100px;
        background-color: red;
        display: none;
      }
      div,
      section {
        display: inline-block;
        width: 200px;
        height: 100px;
        background-color: gold;
      } */

      div {
        margin-left: 200px;
        display: list-item;
      }

      input {
        width: 300px;
      }
      img {
        width: 50px;
      }
    </style>
  </head>
  <body>
    <!-- <a href="https://www.baidu.com">跳转到百度</a>

    <div>这是div元素</div>
    <section>这是section元素</section> -->

    <a href="#" style="float: left;">a标签</a>
    <div>div元素</div>
    <ul>
      <li>li元素</li>
    </ul>
    <hr>
    <input type="text">
    <input type="text">
    <hr>
    <img src="./images/icon.jpg" alt="">
    <img src="./images/icon.jpg" alt="">
  </body>
</html>

<!-- 
  元素类型的转换
    display
      1. display：block；	把元素转换成块状元素
      2. display：inline；	把元素转换成行内
      3. display：inline-block；	把元素转换成行内块
      4. display：none；	隐藏元素，不占位置的


    当一个元素进行了浮动/定位，那么这个元素自动变成块状元素，而且这个块状元素的宽度由内容撑开
    当一个元素变成了弹性盒，那么里面所有的子元素也会变成块状元素

 -->
